<template>
<van-form>
    <van-field
      v-model="metric"
      type="number"
      :label="metricLabel"
      right-icon="more-o"
      @click-right-icon="togglePicker('metric')"
      @blur="metricToImperial"
    />
    <van-field
      v-model="imperial"
      type="number"
      :label="imperialLabel"
      right-icon="more-o"
      @click-right-icon="togglePicker('imperial')"
      @blur="imperialToMetric"
    />
    <div style="margin: 16px">
      <van-button round block type="primary"> 转换 </van-button>
    </div>
  </van-form>

   <!-- 选择器 -->
  <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
    <van-picker 
      :columns="columns"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
</template>

<script setup>
import { useTogglePicker } from '@/features/Weight/useTogglePicker'
import { useWeight } from '@/features/Weight/useWeight'

const { showPicker, columns, togglePicker } = useTogglePicker();
const { metricLabel, metric,  imperialLabel, imperial, imperialUnit, metricUnit, imperialToMetric, metricToImperial, onConfirm } = useWeight(columns, showPicker);

</script>
